<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>公告列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="40" />
            <el-table-column prop="title" label="标题" width="" />

            <el-table-column prop="update_date" label="发布日期" width="" />
            <el-table-column prop="update_time" label="更新日期" width="" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" plain size="small">
                        <el-icon>
                            <Edit />
                        </el-icon>编辑
                    </el-button>
                    <el-button type="success" plain size="small">
                        <el-icon>
                            <Star />
                        </el-icon>标记
                    </el-button>
                    <el-button @click="handleRemove(scope.row.id,scope.$index)" type="danger" plain size="small">
                        <el-icon>
                            <Delete />
                        </el-icon>删除{{scope.$index}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import notice from '@/api/notice';

let tableData = ref([])
async function loadList() {
    let { status, data } = await notice.list();
    if (status) {
        tableData.value = data;
        console.log(data)
    }
}
loadList();
function handleRemove(id, index) {
    ElMessageBox.confirm(
        '确定删除公告吗',
        '确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(async () => {
            // 先发送ajax，成功后操作DOM进行删除
            let { status, msg } = await notice.remove({ id });
            if (status) {
                // 删除成功
                ElMessage.success(msg);
                // 操作DOM
                tableData.value.splice(index, 1);
            } else {
                ElMessage.error(msg);
            }
            // console.log('确认');
        })
        .catch(() => {

            ElMessage.info('取消成功');
        })
}
// console.log(scope)
</script>
